<template>
	<!-- 工作通知 -->
	<view>
		<view class="search">
			<uni-search-bar placeholder="搜索单据编号" v-model.trim="searchValue" cancelText=" " class="search-box">
			</uni-search-bar>

			<text @click="search">搜索</text>
		</view>

		<scroll-view show-scrollbar style="height: calc(100vh - 56px)" :scroll-y="true" :refresher-enabled="true"
			@refresherrefresh="refresherrefresh" lower-threshold="105" @scrolltolower="scrolltolower"
			:refresher-triggered="triggered">
			<view class="list-item" v-for="(item, index) in data.dataList" @click="toDetail(item)"
				v-if="data.dataList?.length" :key="index">
				<view class="item">
					<view class="item-title "> <text> 消息内容： {{ item.billNo }}</text> <text
							class="float-right sm-text-info " :class="item.readFlag==='0'&& 'text-color-link'" >
							{{item.readFlag==='0'?  '未读':'已读'}}
							<uni-icons v-if="item.readFlag==='0'" type="info-filled" color="#3E70D8" size="12">
							</uni-icons>
						</text> </view>
					<view class="detail">
						<text>
							<text class="font-bold">单据类型：</text> {{ item.billTypeName }}
						</text>
						<view>
							<text class="font-bold">消息类型: </text>
							{{ item.messageTypeName }}
						</view>
						<view>
							<text class="font-bold">消息内容: </text>
							{{ item.messageContent }}
						</view>
						<view>
							<text class="font-bold">发送人: </text>
							{{ item.senderName }}
						</view>
						<view>
							<text class="font-bold">时间： </text> {{ item.createTime }}
						</view>
					</view>
				</view>
			</view>
			<view v-else class="no-data"> 暂无数据 </view>
		</scroll-view>
	</view>
</template>

<script>
	import _ from "lodash";
	import {
		postUserMessageList
	} from "./api";
	import {
		Toast
	} from "@/utils/uniHooks/toast";
	export default {
		data() {
			return {
				searchValue: "",
				data: {
					dataList: [],
					totalCount: "",
				},
				triggered: true, //下拉刷新标志
				pageNo: 1,
				pageSize: 10,
				refresh: false,
			};
		},

		onShow() {
			this.refresherrefresh();
		},
		methods: {

			search() {
				this.pageNo = 1;
				this.triggered = true;
				this.queryList();
			},

			queryList: _.throttle(
				async function() {


						const params = {
							pageNo: this.pageNo,
							pageSize: this.pageSize,
							wd: this.searchValue,
							checkedList: ["read"]
						};
						const data = (
							await postUserMessageList({
								...params,
							})
						)?.data;
						this.data = {
							dataList: [...this.data.dataList, ...data?.rows],
							totalCount: data.totalCount,
						};
						this.triggered = false;
					},
					500, {
						trailing: false,
					}
			),

			scrolltolower() {
				if (this.data.totalCount > this.data.dataList.length) {
					uni.showLoading();
					this.pageNo++, this.queryList();
				}else{
        Toast('暂无更多数据')
      }
			},
			refresherrefresh() {
				this.data.dataList = [];
				this.search();
			},
			toDetail(item) {
				uni.navigateTo({
					url: `/pages/workNotice/detail?itemData=${JSON.stringify(item)}&billTypeName=${item.billTypeName}`,
					animationType: "pop-in",
					animationDuration: 300,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.search {
		padding: 0 10px;
		display: flex;
		color: $uni-color-primary;
		justify-content: space-between;
		font-size: 14px;

		align-items: center;

		.search-box {
			flex: 1;
		}
	}
</style>
